<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拉勾教育-Bootstrap</title>
    <!-- 引用Bootstrap的css样式，JQuery，Bootstrao.js -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="./js/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
    <script>
        $(document).ready(function () {
            showPersons();
        })
    </script>
</head>
<script>


    var id_index = 1000; //设置用户编号
    var p1 = { "pid": id_index, "pname": "张三", "psex": "女", "ppassword": "1234", "page": 29, "pbirthday": "1991-1-1" };
    id_index++;
    var p2 = { "pid": id_index, "pname": "李四", "psex": "男", "ppassword": "1234", "page": 28, "pbirthday": "1992-2-2" };
    id_index++;
    var p3 = { "pid": id_index, "pname": "王五", "psex": "女", "ppassword": "1234", "page": 27, "pbirthday": "1993-3-3" };
    id_index++;
    var p4 = { "pid": id_index, "pname": "赵六", "psex": "女", "ppassword": "1234", "page": 26, "pbirthday": "1994-4-4" };
    var persons = [p1, p2, p3, p4];
    // 显示用户列表的
    function showPersons() {
        // 基于页面中的table表格显示用户列表
        var tb = $("#tb1");
        // 1、显示table的第一行标题(需要在table中添加tr的元素)
        var str = "<tr class='info'><td>序号</td><td></td><td>工号</td><td>姓名</td><td>性别</td><td>密码</td><td>年龄</td><td>出生日期</td></tr>"
        // 2、从第二行开始遍历用户数组
        for (var i = 0; i < persons.length; i++) {
            str += "</tr><td>" + "<input type='radio' class='radioArr' onclick='if(this.c==1){this.c=0;this.checked=0}else {this.c=1;this.checked=1}' value=" + persons[i].pid + ">"
                + "<td><td>" + persons[i].pid
                + "</td><td>" + persons[i].pname
                + "</td><td>" + persons[i].psex
                + "</td><td>" + persons[i].ppassword
                + "</td><td>" + persons[i].page
                + "</td><td>" + persons[i].pbirthday
                + "</td></tr>"
        }
        tb.html(str);
    }

    function judgeRadioClicked() {
        //获得 单选选按钮name集合 
        var radios = document.getElementsByClassName('radioArr');
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].c) {
                //弹出选中单选按钮的值 
                return true;
            }
        }
        return false;
    }
    // 更新时回显方法
    function showUpdateForm() {
        var radios = document.getElementsByClassName('radioArr');
        var pid = "";
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].c) {
                //弹出选中单选按钮的值 
                pid = radios[i].value;
            }
        }
        // 根据这个Id获取用户对象数组中的某一个对象，并且把数据回显到div中
        for (var i = 0; i < persons.length; i++) {
            if (persons[i].pid == pid) {
                $("#pid").val(pid);
                $("#pname").val(persons[i].pname);
                $("#page").val(persons[i].page);
                $("#psex").val(persons[i].psex);
                $("#ppassword").val(persons[i].ppassword);
                $("#pbirthday").val(persons[i].pbirthday);
            }
        }
    }

    // 编辑用户信息的方法
    function updateById() {
        var radios = document.getElementsByClassName('radioArr');
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].c) {
                //弹出选中单选按钮的值 
                var pid = radios[i].value;
            }
        }
        // 把div中的数据获取出来
        // 放在一个对象中
        var pname = $("#pname").val();
        var psex = $("#psex").val();
        var page = $("#page").val();
        var ppassword = $("#ppassword").val();
        var pbirthday = $("#pbirthday").val();
        var p = { "pid": pid, "pname": pname, "psex": psex, "ppassword": ppassword, "page": page, "pbirthday": pbirthday };
        // 遍历这个用户数组中的每一个对象和pid来比较是否是此对象
        for (var i = 0; i < persons.length; i++) {
            if (persons[i].pid == pid) {// 如果是此对象， 用新的对象替换这个数组中的对象
                persons[i] = p;
            }
        }
        close();
        
    }
    function save() {

        var pname = $("#pname").val();
        var psex = $("#psex").val();
        var page = $("#page").val();
        var ppassword = $("#ppassword").val();
        var pbirthday = $("#pbirthday").val();
        var pid = eval(persons[persons.length-1].pid+'+'+1);
        
        var p = { "pid": pid, "pname": pname, "psex": psex, "ppassword": ppassword, "page": page, "pbirthday": pbirthday };
        //把对象添加到数组中
        persons.push(p);


        close();
        
    }

    // 清空此模态框中的数据
    function clearPerson() {
        $("#pname").val("")
        $("#ppassword").val("")
        $("#pbirthday").val("")
        $("#psex").val("")
        $("#page").val("")
    }
    // 关闭窗口的方法
    function close() {
        // 关闭窗口
        $('#myModal1').modal('hide');
        // 清空此div中的数据
        clearPerson();
        // 显示用户列表的
        showPersons();
    }

    // 根据用户Id删除用户
    function removeById() {
        var ready = judgeRadioClicked();
        if (ready) {
            // 弹出窗口提示是否删除
            // confirm: 指定消息并且带有确定和取消的对话框
            var radios = document.getElementsByClassName('radioArr');
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].c) {
                    //弹出选中单选按钮的值 
                    var pid = radios[i].value;
                }
            }
            const con = window.confirm("您确定要删除此记录吗？") //点击 确定  = true
            if (con == true) {
                for (var i = 0; i < persons.length; i++) {
                    if (persons[i].pid == pid) {
                        //如果判断此数组中的某一个对象id 和 要删除的对象Id一致 则删除此元素
                        delete persons[i];
                    }
                }
                //删除后去null值
                for (var i = 0; i < persons.length; i++) {
                    if (persons[i] == '' || persons[i] == null || typeof (persons[i]) == undefined) {
                        persons.splice(i, 1);
                        i = i - 1;
                    }
                }
                showPersons();
            }
        } else {
            alert("请选择用户！");
        }



    }



    //查询方法
    function select() {
        var selectId = document.getElementById("selectById").value;
        var selectName = document.getElementById("selectByName").value;
        if (selectId == '' && selectName == '') {
            alert("请输入您要查询的条件，并且请不要同时输入！");
        } else if (selectId != '' && selectName != '') {
            alert("请不要同时输入！");
        } else if (selectId != '') {
            selectByPersonId(selectId);
        } else if (selectName != '') {
            selectByPersonName(selectName);
        }
    }

    function selectByPersonId(selectId) {
        for (var i = 0; i < persons.length; i++) {
            if (selectId == persons[i].pid) {
                alert('id：' + persons[i].pid + '\n' +
                    '姓名：' + persons[i].pname + '\n' +
                    '年龄：' + persons[i].page + '\n' +
                    '性别：' + persons[i].psex + '\n' +
                    '密码：' + persons[i].ppassword + '\n' +
                    '生日：' + persons[i].pbirthday
                );
                return;
            }
        }
        alert("查无此人");
    }

    function selectByPersonName(selectName) {
        for (var i = 0; i < persons.length; i++) {
            if (selectName == persons[i].pname) {
                alert('id：' + persons[i].pid + '\n' +
                    '姓名：' + persons[i].pname + '\n' +
                    '年龄：' + persons[i].page + '\n' +
                    '性别：' + persons[i].psex + '\n' +
                    '密码：' + persons[i].ppassword + '\n' +
                    '生日：' + persons[i].pbirthday
                );
                return;
            }
        }
        alert("查无此人");
    }

    function insertNewPerson() {
        var readyFirst = judgeRadioClicked();
        if (readyFirst) {
            alert("请不要选择用户！");
        } else {
            $("#pname").val("");
            $("#psex").val("");
            $("#page").val("");
            $("#ppassword").val("");
            $("#pbirthday").val("");
            $('#myModal1').modal('show');
        }
    }

    function updatePerson() {
        var readyFirst = judgeRadioClicked();
        if (!readyFirst) {
            alert("请选择用户！");
        } else {
            showUpdateForm();
            $('#myModal1').modal('show');
        }
    }

    // 保存或者修改用户信息的方法
    function saveOrUpdatePerson() {
        //判断是保存还是添加,新增序号是不可能选中的，保存会选一次
        //获取pid的这个数据
        var radios = document.getElementsByClassName('radioArr');
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].c) {
                //弹出选中单选按钮的值 
                var pidval = radios[i].c;
            }
        }
        //如果存在，那么就是修改
        if (pidval) { // 有值 为 true ; 
            updateById()
        } else {// 如果不存在那就说明应该是添加
            save()
        }

    }
</script>

</head>

<body>

    <div style="margin: 15px;">
        <button type="button" class="btn btn-success" onclick="insertNewPerson()"><span class="glyphicon glyphicon-plus">新增</span></button>
        <button type="button" class="btn btn-success" onclick="removeById()"><span class="glyphicon glyphicon-plus">删除</span></button>
        <button type='button' class='btn btn-success' onclick='updatePerson()'><span class='glyphicon glyphicon-plus'>编辑</span></button>
        <button type="button" class="btn btn-success" onclick="select()"><span class="glyphicon glyphicon-plus">查询</span></button>
        <input type="text" id="selectById" placeholder="按工号查询" />
        <input type="text" id="selectByName" placeholder="按姓名查询" />
    </div>
    <div>
        <table class="table table-hover" id="tb1"></table>
    </div>
    <div class="modal fade" id="myModal1">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">添加人员信息</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form action="#" method="POST" onsubmit="saveOrUpdatePerson();return false;">
                        <!-- 工号隐藏 -->
                        <input id="pid" hidden="hidden" />
                        <!--required="required" 提交前必须填写-->
                        请输入人员姓名：<input class="form-control" id="pname" type="text" required="required" /><br />
                        请输入人员性别：
                        <select class="form-control" id="psex">
                            <option value="">--请选择--</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select><br />
                        请输入人员密码：<input class="form-control" id="ppassword" type="text" required="required" /><br />
                        请输入人员年龄：<input class="form-control" id="page" type="number" required="required" /><br />
                        请输入人员出生日期：<input class="form-control" id="pbirthday" type="text" required="required" /><br />
                        <button class="btn btn-success btn-lg" type="submit"><span class="glyphicon glyphicon-floppy-saved"></span>保存</button>
                        <button type="button" class="btn btn-danger btn-lg" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-remove"></span>关闭
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>